<template>
    <view class="content" :style="{ '--color': color }">
        <status-bar title="选择使用方式" :back="back"></status-bar>
        <block v-for="(item, index) in pageData" :key="item.id">
            <view class="viewbox auto m-top20 p-bot20 bgwhite bor_radius_10 p-left20">
                <view class="row bot p-top20 p-bot20 j-sb a-center">
                    <view class="color_33 h6 bold">订单时间：{{ item.order_date }}</view>
                </view>

                <view class="rows d-flex m-top10 f-nowrap">
                    <view class="product_Img p-re f-shrink-0 f-gorw0">
                        <image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="wh bor_radius_10"></image>
                        <view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{ item.id }}</view>
                    </view>
                    <view class="d-flex f-column j-sb m-left20 f-gorw1">
                        <text class="color_33 size30 ellipsis">{{ item.pdtname }}</text>
                        <view class="d-flex a-center" v-if="item.pdt_spec">
                            <text class="color_99 h6 f-shrink-0">规格：</text>
                            <text class="color_33 h6 bold ellipsis">{{ item.pdt_spec }}</text>
                        </view>
                        <view class="d-flex a-center">
                            <text class="color_99 h6">数量：</text>
                            <text class="color_33 h6 bold">X{{ item.pdt_num }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </block>

        <view class="viewbox auto m-top20 bgwhite p-left20 bor_radius_10">
            <view class="selectLi bot" @click="toUrl('homeDelivery?ids=' + id)">
                <view class="d-flex a-center">
                    <view class="iconfont icon-a-2501 size48 color_ff"></view>
                    <text class="color_20 size30 m-left20">快递到家</text>
                </view>
                <view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
            </view>
            <!-- 	@click="verify = true" -->
            <view class="selectLi bot" @click="verifyBtn()">
                <view class="d-flex a-center">
                    <view class="iconfont icon-a-2502 size48 color_5b"></view>
                    <text class="color_20 size30 m-left20">门店自提</text>
                </view>
                <view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
            </view>

            <block v-if="goods_share == 1">
                <!-- #ifdef H5 -->
                <view class="selectLi bot" @click="ShareIn()">
                    <view class="d-flex a-center">
                        <view class="iconfont icon-a-2503 size48 color_ff8"></view>
                        <text class="color_20 size30 m-left20">赠送好友</text>
                    </view>
                    <view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
                </view>
                <!-- #endif -->
                <!-- #ifdef MP-WEIXIN -->
                <view class="selectLi bot">
                    <button open-type="share" class="Share"></button>
                    <view class="d-flex a-center">
                        <view class="iconfont icon-a-2503 size48 color_ff8"></view>
                        <text class="color_20 size30 m-left20">赠送好友</text>
                    </view>
                    <view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
                </view>
                <!-- #endif -->

                <view class="selectLi bot" @click="trajectory">
                    <view class="d-flex a-center">
                        <view class="iconfont icon-a-2503 size48 color_ac5"></view>
                        <text class="color_20 size30 m-left20">商品轨迹</text>
                    </view>
                    <view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
                </view>
            </block>
        </view>

        <!--  线下使用 -->
        <view class="masking d-flex j-centert a-center" v-if="verify" @click="verify = false">
            <view class="rows codeImg bgwhite bor_radius_20 p-bot40">
                <view class="row j-centert p-top60 p-bot60 bot_bor">
                    <image :src="$imgUrls(pageCode.QRCodeImg)" mode="aspectFill" class="codeverify"></image>
                </view>
                <block v-for="(item, index) in pageCode.orderCode" :key="index">
                    <view class="row j-centert color_33 h5 bold p-top30 t-letter2">{{ item.idcode }}</view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    // #ifdef H5
    import jweixin from 'jweixin-module';
    // #endif
    export default {
        data() {
            return {
                goods_share: 0,
                imgUrl: this.imgUrl,

                shareBox: '',
                verify: false, // 线下使用
                id: '', // 商品id
                ids: [],
                keycode: [],

                pageData: [],
                pageCode: {},
                dtime: '',
                jssdk: ''
            };
        },
        onLoad(e) {
            let that = this;
            if (e.id) that.id = e.id;
            if (e.ids) that.id = e.ids.toString();
            // #ifdef H5
            this.$common.H5HideShare();
            // #endif
        },
        onShow() {
            let that = this;
            that.ids = []; // 清空 避免串
            that.keycode = []; // 清空 避免串
            // that.getshareInfo();
            that.getGiveGoodsInfo();
        },
        methods: {
            // 获取jssdk信息
            getshareInfo() {
                let that = this;
                that.$http
                    .get({
                        url: '/zzj_singleSaleApi/getJssdkConfig'
                    })
                    .then((res) => {
                        that.jssdk = res;
                    });
            },
            //  获取分享的信息
            ShareIn() {
                let that = this;
                // #ifdef H5
                this.$common.H5ShowShare();
                jweixin.config(that.jssdk);
                // #endif
                that.$http
                    .post({
                        url: '/singleSaleWarehouseApi/getShareInfo',
                        data: {
                            checkid: that.ids.join(','),
                            keycode: that.keycode.join(',')
                        }
                    })
                    .then((res) => {
                        if (res.errcode == '100') {
                            if (res.data) {
                                that.shareBox = res.data;
                                let share = res.data;
                                //  #ifdef H5

                                jweixin.ready(function () {
                                    let shareData = {
                                        title: share.title, // 分享标题
                                        desc: share.desc, // 分享描述
                                        link: share.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                        imgUrl: share.imgUrl, // 分享图标
                                        success: function () {
                                            that.Sharing();
                                        },
                                        fail: function () {
                                            uni.showToast({
                                                title: '失败',
                                                icon: 'none'
                                            });
                                        }
                                    };
                                    //分享到朋友圈
                                    jweixin.updateAppMessageShareData(shareData);
                                    //分享给好友
                                    jweixin.updateTimelineShareData(shareData);
                                    //分享到朋友圈
                                    jweixin.onMenuShareTimeline(shareData);
                                    //分享给好友
                                    jweixin.onMenuShareAppMessage(shareData);
                                    //分享到QQ
                                    jweixin.onMenuShareQQ(shareData);
                                });
                                // #endif
                            }
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    });
            },

            //  分享入记录表
            Sharing() {
                let that = this;
                that.$http
                    .post({
                        url: '/singleSaleWarehouseApi/Sharing',
                        data: {
                            ids: that.ids.toString()
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return that.$Toast(res.msg);
                    });
            },
            // 获取商品信息
            getGiveGoodsInfo() {
                let that = this;
                uni.showLoading({
                    title: '加载中~'
                });
                that.$http
                    .post({
                        url: '/singleSaleWarehouseApi/getGiveGoodsInfo',
                        data: {
                            ids: that.id
                        }
                    })
                    .then((res) => {
                        uni.hideLoading();
                        if (res.errcode == '100') {
                            const result = res.data;

                            this.goods_share = res.goods_share;
                            result.forEach((item, index) => {
                                that.keycode.push(item.keycode);
                                that.ids.push(item.id);
                            });
                            that.pageData = result;
                            // #ifdef H5
                            that.getshareInfo();

                            // #endif
                            that.ShareIn();
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    });
            },

            // 获取二维码
            verifyBtn() {
                let that = this;
                uni.showLoading({
                    title: '加载中~'
                });
                that.$http
                    .post({
                        url: '/singleSaleWarehouseApi/getGoodsQRCode',
                        data: {
                            checkid: that.ids.toString(),
                            keycode: that.keycode.toString()
                        }
                    })
                    .then((res) => {
                        uni.hideLoading();
                        if (res.errcode == '100') {
                            that.verify = true;
                            that.pageCode = res.data;
                            that.checkqrcode();
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    });
            },

            // 查询是否被核销
            checkqrcode() {
                let that = this;
                clearInterval(that.dtime);
                let Endids = that.ids[that.ids.length - 1]; // 最后一个
                let Endkeycode = that.keycode[that.keycode.length - 1]; // 最后一个
                that.$http
                    .post({
                        url: '/singleSaleWarehouseApi/checkqrcode',
                        data: {
                            checkid: Endids,
                            keycode: Endkeycode
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return that.$Toast(res.msg);
                        if (that.verify) {
                            if (res.flag == 1) {
                                that.dtime = setInterval(() => {
                                    that.checkqrcode();
                                }, 3000);
                            } else if (res.flag == 3) {
                                clearInterval(that.dtime);
                                that.verify = false;
                                that.toUrl(`homeDelivery?ids=${res.data.checkids.join(',')}&delivery_type=1`);
                            } else {
                                clearInterval(that.dtime);
                                that.$Toast('核销成功', 2);
                            }
                        } else {
                            clearInterval(that.dtime);
                        }
                    });
            },

            // 商品轨迹
            trajectory() {
                let ids = this.ids.join(',');
                let keycode = this.keycode.join(',');
                this.toUrl(`process?ids=${ids}&keycode=${keycode}`);
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'bid'])
        },
        onShareAppMessage(res) {
            let that = this;
            let giveId = that.ids.join(',');
            let userkey = that.pageData[0].userkey;
            if (res.from === 'button') {
                // 来自页面内分享按钮
                console.log(res.target);
            }
            return {
                title: that.shareBox.title,
                desc: that.shareBox.desc,
                imageUrl: that.shareBox.imgUrl,
                path: `/pages/index/index?share_v_id=${that.vid}&giveId=${giveId}&userkey=${userkey}&pageType=30`
            };
        }
    };
</script>

<style lang="scss">
    page {
        background: #f7f9fa;
    }

    .color_ff {
        color: #ff816d;
    }

    .color_5b {
        color: #5ba7fe;
    }

    .color_ff8 {
        color: #ff834b;
    }

    .color_ac5 {
        color: #ac58e3;
    }

    .selectLi {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 20rpx 20rpx 0;
        position: relative;
    }

    .Share {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: transparent;
        border: none;
    }

    .Share::after {
        border: none;
    }

    .product_Img {
        width: 140rpx;
        height: 140rpx;
    }

    .numId {
        position: absolute;
        right: 0;
        top: 0;
        background: var(--color);
        border-radius: 0 10rpx 0 10rpx;
    }

    .share {
        height: 100rpx;
        border-radius: 50rpx;
        -webkit-border-radius: 50rpx;
        margin-top: 130rpx;
    }

    .share::before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 25rpx 30rpx 25rpx;
        border-color: transparent transparent #ffffff transparent;
        position: absolute;
        right: 36rpx;
        top: -28rpx;
    }

    .getshare {
        height: 50rpx;
        border-radius: 25rpx;
        -webkit-border-radius: 25rpx;
    }

    .codeImg {
        width: 619rpx;
    }

    .codeverify {
        width: 380rpx;
        height: 380rpx;
    }
</style>
